import React from 'react';
import ReactDOM from 'react-dom';
import { Table, Row, Col } from 'antd';

const Demo = React.createClass({
  getInitialState() {
    return {
      data:[],
      tenementId:'',
      record:[],
      pagination:{
        pageSize: 10,
        currentPage:1
      }

    }
  },

  componentDidMount(){
    this.fetch(this.props.location.state.record.tenementId);
    this.setState({
      tenementId:this.props.location.state.record.tenementId,
      record:this.props.location.state.record
    });
  },
  fetch(tenementId){

    let currentPage = this.state.pagination.currentPage;
    let pageSize = this.state.pagination.pageSize;

    let param = Object.assign({}, {'currentPage':currentPage,'pageSize':pageSize,"tenementId":tenementId})
    Utils.sendAjax({
      url: '/decorate/cost/list',
      data:JSON.stringify(param),
      callback:(result) => {
        if (result.code === '200') {
          let data = result.data;
          data.map((item) =>{
            item.address = this.props.location.state.record.address;
            item.ownerName = this.props.location.state.record.ownerName;
          })
          
          this.setState({
            data: result.data,
            pagination: result.page
          });
          console.log('this.state.data',this.state.data);

        } else {
          notification.error(result.message);
        }
      }
    });
  },
  rowKey(data) {
    return data.id;
  },
  handleTableChange(pagination){
    const pager = this.state.pagination;
    pager.currentPage = pagination.current;
    this.setState({
      pagination: pager
    });
    this.fetch(this.props.location.state.record.tenementId);;
  },
  render () {
    let decorateCost = this.props.location.state.record.decorateCost;
    console.log('this.state.pagination',this.state.pagination);
    const columns = [
    //  {
    //  colSpan:0,
    //  title: '	房源ID',
    //  dataIndex: 'tenementId',
    //  key: 'tenementId',
    //
    //},{
    ////  className:'invisible',
    //  title: '	房间ID',
    //  dataIndex: 'roomId',
    //  key: 'roomId',
    //},
    {
      title: '消费对象',
      dataIndex: 'decorateType',
      key: 'decorateType',
      render:(text, record) => (
        <span>{record.decorateType == '1' ? '整套' : record.roomName}</span>
      )
    },
    {
      title: '消费名称',
      dataIndex: 'costKindName',
      key: 'costKindName',
    },
     {
      title: '消费类型',
      dataIndex: 'costType',
      key: 'costType',
      render:(text, record) =>{
        const type = {
          '1':'硬装',
          '2':'家电/软装',
          '3':'中介费',
          '4':'其他'
        }
        return (
          <span>{type[record.costType]}</span>
        )
      }
    }, {
      title: '数量',
      dataIndex: 'num',
      key: 'num',
    }, {
      title: '单价',
      dataIndex: 'price',
      key: 'price',
    }, {
    title: '消费金额',
    dataIndex: 'expenceMoney',
    key: 'expenceMoney',
    }, {
      title: '消费日期',
      dataIndex: 'expenceTime',
      key: 'expenceTime',
    }, {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
    }];
    return (
      <div>
        <p className="top-info">
          <span className="info-span">业主姓名：{this.props.location.state.record.ownerName}</span>
          <span className="info-span">房屋地址：{this.props.location.state.record.address}</span>
          <span className="info-span">房屋总成本：<strong className="color-red">￥{decorateCost?decorateCost:'0'}</strong></span>
        </p>
        <Table rowKey={this.rowKey}
               dataSource={this.state.data}
               columns={columns}
               onChange={this.handleTableChange}
               pagination={this.state.pagination} />
      </div>
    );
  }
});

export default Demo

